<template>
  <div>
    <header class="header-nav navbar-default">
      <div class="container container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div>
            <a class="navbar-brand navbar-brand-left" href="javascript:;" @click="goUrl('/home', 'home')">
              <img :src="url" alt="" style="width:85%;margin-top:6px;" />
            </a>
          </div>
          <!-- <div class="title">
            <p class="text1">撸码云</p>
            <p class="text2">CDN高速下载</p>
          </div> -->
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" :class="{Loginno:hasLogin===false}">
          <div class="bar">
            <ul class="nav navbar-nav">
              <li><a :class="{bottom_line:currunt_index_name == 'home'}" @click="goUrl('/home', 'home')"
                  :style="currunt_index_name == 'home'?'color:#FF7226':'color:black'">首页</a></li>
              <li>
                <a :class="{bottom_line:currunt_index_name == 'adhibition'}" @click="goUrl('/adhibition', 'adhibition')"
                  :style="currunt_index_name == 'adhibition'?'color:#FF7226':'color:black'">我的应用</a>
              </li>
              <li v-if="hasLogin">
                <a :class="{bottom_line:currunt_index_name == 'signatureSuper'}"
                  @click="goUrl('/signatureSuper', 'signatureSuper')"
                  :style="currunt_index_name == 'signatureSuper'?'color:#FF7226':'color:black'">超级签名</a>
              </li>
              <li v-if="hasLogin">
                <a :class="{bottom_line:currunt_index_name == 'appPackaging'}"
                  @click="goUrl('/appPackaging', 'appPackaging')"
                  :style="currunt_index_name == 'appPackaging'?'color:#FF7226':'color:black'">免签封装</a>
              </li>
              <!-- <li>
                <a :class="{bottom_line:currunt_index_name == 'enterprise'}"
                  @click="goUrl('/enterprise', 'enterprise')"
                  :style="currunt_index_name == 'enterprise'?'color:#FF7226':'color:black'">企业签名</a>
              </li> -->
              <!-- <li>
                <a @click="goWebpack()">撸码打包</a>
              </li> -->
              <!-- <li v-if="hasLogin">
                <a :class="{bottom_line:currunt_index_name == 'signatureTF'}"
                  @click="goUrl('/signatureTF', 'signatureTF')"
                  :style="currunt_index_name == 'signatureTF'?'color:#FF7226':'color:black'">TF签名</a>
              </li> -->
              <li v-if="hasLogin">
                <a :class="{bottom_line:currunt_index_name == 'packageAPP'}" @click="goUrl('/packageAPP', 'packageAPP')"
                  :style="currunt_index_name == 'packageAPP'?'color:#FF7226':'color:black'">打包APP</a>
              </li>
              <li v-if="hasLogin">
                <a :class="{bottom_line:currunt_index_name == 'price'}" @click="goUrl('/price', 'price')"
                  :style="currunt_index_name == 'price'?'color:#FF7226':'color:black'">分发套餐</a></li>
              <!-- <li><a  @click="goUrl('/postting','postting')">封装</a></li> -->
              <li><a :class="{bottom_line:currunt_index_name == 'workbox'}" @click="goUrl('/workbox', 'workbox')"
                  :style="currunt_index_name == 'workbox'?'color:#FF7226':'color:black'">工具箱</a></li>
              <li><a :class="{bottom_line:currunt_index_name == 'news'}" @click="goUrl('/news', 'news')"
                  :style="currunt_index_name == 'news'?'color:#FF7226':'color:black'">教程·资讯</a></li>
              <!-- <li><a  @click="goUrl('/document','document')">文档</a></li> -->
            </ul>
          </div>
          <p v-if="!hasLogin" class="navbar-text navbar-right">
            <img :src="UrlLogin" alt="" style="width: 15px; margin: 0px 8px 2px 0px" /><a class="navbar-link"
              @click="goUrl('/register', 'register')">注册</a>|<a class="navbar-link"
              @click="goUrl('/login', 'login')">登录</a>
          </p>
          <el-dropdown v-if="hasLogin" @command="handleCommand" class="navbar-text navbar-right"
            style="display: flex;justify-content: center;margin-top: 26px;">
            <span class="el-dropdown-link">
              <img class="login_head" src="../../../static/login/Navigationbar_img_avatar.png" />{{username}}<i
                class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">我的资料</el-dropdown-item>
              <el-dropdown-item command="c">{{agency}}</el-dropdown-item>
              <el-dropdown-item command="b" icon="el-icon-switch-button">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        url: "../../../static/home/logologin.png",
        UrlLogin: "../../../static/我 的@2x.png",
        hasLogin: false,
        username: '',
        currunt_index_name: 'home',
        objs: '',
        Authorization: '',
        agency: ""
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合/vHPjqgqjPV6eiYfEQ3tDUgLLz7S+Buu0IKEPBz6bMaCZdGJMyw8UCIrp3/R7+vH  http://package.ilucode.com/
    methods: {
      phoneQuery() {
        this.$post(this.API.UserMsg).then(res => {
          console.log(res);
          if (res.code === 1) {
            if (res.data.type == 4) {
              this.agency = "我的代理"
            } else {
              this.agency = "我的推广"
            }
          }
        });
      },
      goWebpack() {
        console.log(this.objs);
        if (this.objs === null || this.objs === undefined || this.objs === '') {
          var temp = window.open('_blank')
          temp.location.href = " http://package.ilucode.com";
        } else {
          var temp = window.open('_blank')
          temp.location.href = " http://package.ilucode.com?obj=" + encodeURIComponent(this.objs);
        }
      },

      goUrl(path, name) {
        if (name == "adhibition" || name == "signatureSuper") {
          var Authorization = sessionStorage["token"];
          // console.log(typeof(Authorization));
          if (Authorization == null || Authorization === "null" || Authorization.length == 0) {
            this.$router.push({
              path: "/login",
              name: "login",
            });
            return;
          }
        }

        // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
        sessionStorage.setItem("currentTab_title", name);

        this.currunt_index_name = name;
        this.$router.push({
          path: path,
          name: name,
        });
      },
      handleCommand(command) {
        if (command == "a") {
          this.goUrl("account_account", "account_account");
        } else if (command == "c") {
          this.goUrl("agency", "agency");
        } else if (command == "b") {
          //清除token
          sessionStorage["token"] = "";
          sessionStorage["token_time"] = 0;
          //成功，跳转到首页
          this.$router.push({
            path: "/home",
            name: "home",
          });
          this.hasLogin = false;

          this.$EventBus.$emit("userLogined", 0);
          sessionStorage.setItem("currentTab_title", "home");
          location.reload();
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.phoneQuery()
      // console.log(window.location.href);
      // console.log(this.$route.query);
      // console.log(this.$route.query.hand, '打印url');
      this.hand = decodeURIComponent(this.$route.query.hand);
      // console.log(this.hand);

      if (this.$route.query.hand) {
        sessionStorage['hand'] = this.hand;
        sessionStorage['token'] = this.hand;
        this.$post(this.API.UserLogin, {}).then((res) => {
          if (res) {
            this.loadingLogin = false,
              this.loadingLogintext = '登录成功'
            //存储token，以后所有的请求，都需要此token进行验证
            sessionStorage['token'] = res.data.userinfo.token;
            sessionStorage['token_time'] = new Date().getTime();
            sessionStorage['username'] = res.data.userinfo.username;
            //登录成功，跳转到首页
            // this.$message.success({
            //   message: '登录成功',
            //   type: 'success',
            //   duration: 1000
            // });
            this.hasLogin = true;
            this.$router.push({
              path: '/adhibition',
              name: 'adhibition'
            })
            this.currunt_index_name = 'adhibition';
            // console.log(this.currunt_index_name);
            this.username = sessionStorage['username'];
          }
        })
      } else {
        // this.$router.push({
        //   path: '/Home'
        // })
      }
      if (this.$route.fullPath == '/adhibition') {
        this.currunt_index_name == 'adhibition'
      }
      this.Authorization = sessionStorage["token"];
      // console.log(this.Authorization);
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        this.hasLogin = false;
        return;
      }
      if (this.Authorization == null || this.Authorization === "null" || this.Authorization.length == 0) {
        this.hasLogin = false;
      } else {
        this.hasLogin = true;
      }

      this.$EventBus.$on("loginStatusChange", ({
        status
      }) => {
        // console.log(status);
        this.hasLogin = status;
      });

      this.username = sessionStorage['username'];
      this.objs = sessionStorage['objs']



    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      let name = sessionStorage.getItem("currentTab_title");
      // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
      if (name) {
        this.currunt_index_name = name;
      }
      console.log(this.$route.name);
      this.currunt_index_name = this.$route.name
      let that = this;
      // 由打包APP--生成安装包页面传过来的事件
      that.$root.$on("goMyapp", function () {
        console.log('上传app到我的应用');
        that.goUrl('/adhibition', 'adhibition')
      })
      // 由打包APP--生成安装包页面传过来的事件
      that.$root.$on("goMysuper", function () {
        console.log('上传app到超级签名');
        that.goUrl('/signatureSuper', 'signatureSuper')
      })
    },
  };

</script>
<style scoped>
  .Loginno {
    margin-left: 200px;
  }

  html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  header {
    min-height: 80px;
  }

  .nav {
    margin-top: 15px;
  }

  .navbar-text {
    margin-top: 30px;
  }

  .bar {
    margin-left: 155px;
  }

  .navbar-default {
    background-color: #fff;
    border-color: #e7e7e7;
  }

  a:hover {
    text-decoration: none !important;
    color: #000;
  }

  .navbar-default .navbar-nav>li>a {
    margin: 0px 10px;
  }

  .bottom_line {
    border-bottom: solid 2px #FF7226;
  }

  .navbar-nav>.active>a:hover {
    color: #ff7226;
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }

  .title {
    position: absolute;
    top: 18px;
    margin-left: 62px;
  }

  .text1 {
    font-size: 18px;
    font-weight: 800;
    width: 120px;
    color: #ff7226;
  }

  .text2 {
    font-size: 14px;
    margin-top: -10px;
    color: #a5a1a1;
  }

  .navbar-default .navbar-nav {
    margin-left: 0px;
  }

  .navbar-default .navbar-nav>li>a {
    margin: 0px -5px;
  }

  .navbar-text a {
    color: #000;
    padding: 0px 5px;
  }

  .navbar-default .navbar-nav>li>a {
    margin: 0px 10px;
    color: #000;
    font-size: 14px;
  }

  .navbar-brand-left {
    padding: 15px 0px;
  }

  /* 登录菜单 */
  .el-dropdown-link {
    cursor: pointer;
    color: #ff7226;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .login_head {
    width: 30px;
    margin-right: 10px;
  }

  .nav>li>a {
    padding: 10px 8px;
  }

  @media (max-width: 1198px) {
    .navbar-default .navbar-nav>li>a {
      margin: 0px -4px;
    }

    .navbar-default .navbar-nav {
      margin-left: 10px;
    }

    /* .bar {
      margin-left: 155px !important;
    } */
  }

  @media (max-width: 992px) {
    .bar {
      margin-left: 0px !important;
    }

    .navbar-default .navbar-nav {
      margin-left: 140px;
    }

    .navbar-default .navbar-nav>li>a {
      margin: 0px -8px;
    }

    .navbar-toggle {
      margin-top: 20px;
    }

    .navbar-text {
      display: none;
    }

    div>>>.el-dropdown-link {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .navbar-default .navbar-nav {
      margin-left: 0px;
    }

    .navbar-brand-left {
      padding: 15px 15px;
    }

    .title {
      position: absolute;
      top: 18px;
      margin-left: 72px;
    }

    .navbar-default .navbar-collapse {
      border-color: none;
    }

    .navbar-text {
      display: block;
    }

    div>>>.el-dropdown-link {
      display: block;
      /* margin-left: -280px; */
    }
  }

  @media (max-width: 576px) {
    .bar {
      margin-left: 0px !important;
    }

    .navbar-header {
      min-height: 80px;

    }

    .Loginno {
      margin-left: 0px;
    }

    .navbar-toggle {
      margin-top: 20px;
    }

    .navbar-default .navbar-nav {
      margin-left: 0px;
    }

    .navbar-brand-left {
      padding: 15px 15px;
    }

    .title {
      position: absolute;
      top: 18px;
      margin-left: 72px;
    }
  }

</style>
